<template>
  <div class="email_code">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-2 col-md-offset-5 col-xs-6 col-xs-offset-3">
          <img src="../../assets/logo1.png" class="text-center" style="width: 50%;margin: 25% 25% 0 25%;">
          <h3 class="text-center">验证邮箱</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <van-form @submit="onSubmit" >
            <van-field
                v-model="email"
                name="邮箱地址"
                label="邮箱地址"
                placeholder="请输入注册时的邮箱地址"
                :rules="[{ pattern: emailpattern,required: true, message: '请输入注册时的邮箱地址' }]"
            />
            <van-field
                v-model="code.content"
                center
                clearable
                label="验证码"
                placeholder="请输入邮箱验证码"
                :rules="[{ pattern: codepattern,required: true, message: '请输入邮箱中收到的6位数验证码' }]"
            >
              <template #button>
                <van-button size="small" native-type="button" type="info" @click="getcode" :loading="code.btn_loading" :disabled="code.getCodeAbled" loading-text="发送中...">
                  {{ code.tip }}</van-button>
              </template>
            </van-field>
            <div style="margin: 16px;">
              <van-button :loading="logloading" loading-text="验证中..." block round size="large" type="info" native-type="submit">验证</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {emailCode, setEmailCode} from "../../utils/api";
import qs from "qs";

export default {
  name: "EmailCode",
  data(){
    return {
      email:'',
      beforfrom:'',
      logloading:false,
      codepattern:/^\d{6}$/,
      emailpattern:/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/,
      code:{
        content:'',
        btn_loading:false,
        djs:180,
        djsInterval:'',
        tip:'发送验证码',
        getCodeAbled:false
      }
    }
  },
  methods:{
    onSubmit(){
      this.logloading=true
      setEmailCode({
        email:this.email,
        code:this.code.content
      }).then(res=>{
        console.log(res)
        if(res.status==200) {
          this.$notify({
            title: '成功',
            message: res.msg,
            type: 'success'
          });
          this.$router.replace({path:'/forget',query:{voucher:res.voucher,email:this.email}})
        }else{
          this.$notify({
            title: '警告',
            message: res.msg,
            type: 'error'
          });
          this.logloading=false
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    getcode(){
      if(this.emailpattern.test(this.email)){
        this.code.btn_loading = true
        //发送验证码
        emailCode(qs.stringify({
          email:this.email
        })).then(res=>{
          if(res.status==200){
            this.$notify({
              title: '成功',
              message: res.msg,
              type: 'success'
            });
            this.code.djsInterval = null
            this.code.btn_loading = false
            this.code.getCodeAbled = true
            this.code.djsInterval = setInterval(()=>{
              if(this.code.djs>0){
                this.code.djs--;
                this.code.tip = `${this.code.djs}秒后获取`
              }else{
                this.code.djs = 180;
                this.code.getCodeAbled = false
                this.code.tip = '获取验证码'
                clearInterval(this.code.djsInterval)
              }
            },1000)
          }else{
            this.$notify({
              title: '警告',
              message: res.msg,
              type: 'error'
            });
            this.code.btn_loading = false
          }
        }).catch(err=>{
          console.log(err)
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
